import React, { FC, useEffect } from 'react'
import F2 from '@antv/f2'
interface Props {
  options: any,
  holiday: any
}

const Echarts:FC<Props> = (props) => {
  const { options } = props
  let chart: F2.Chart<F2.DataRecord>
  useEffect(() => {
    if (!chart) {
      chart = new F2.Chart({
        id: 'myChart',
        pixelRatio: window.devicePixelRatio, // 指定分辨率
        padding: 'auto'
      })
    }
    chart.clear()
    // @ts-ignore
    chart.source(options)
    chart.scale('x', {
      type: 'cat',
      ticks: ['-5', '-4', '-3', '-2', '-1', '1', '2', '3', '4', '5']
    })
    chart.tooltip({
      triggerOn: 'click'
    })
    chart.legend(false)
    chart.scale('y', {
      type: 'linear',
      tickCount: 10
    })
    chart.line().position('x*y').size('name', (value: string) => {
      if (value !== '平均值') {
        return 1
      }
      return 2
    }).color('name', (value: string) => {
      if (value !== '平均值') {
        return '#ef4246'
      }
      return value
    })
    chart.render()
  }, [options])
  return (
    <canvas id='myChart' style={{ height: '250px', width: '100%' }}></canvas>
  )
}
export default Echarts
